<template>
	<view class="">
		<view style="display: flex;" class="bg-white padding-sm margin-sm radius">
			<view style="flex:1;text-align: center;border: 1px solid #ccc;border-radius: 5px" @click="handleClick(-1)"
				class=" juzhong radius ">前一天
			</view>
			<view style="flex:1;text-align: center;">
				<view class="font-13">{{dateToWeek(queryFrom.startClassDate_EQ)}}</view>
				<view class="font-11">
					<uni-datetime-picker type="date" :clear-icon="false" v-model="queryFrom.startClassDate_EQ"
						size="mini" @change="handleClick(0)" />
				</view>
			</view>
			<view style="flex:1;text-align: center;border: 1px solid #ccc;border-radius: 5px" @click="handleClick(1)"
				class=" juzhong radius">后一天</view>
		</view>
		<view class="margin-top-sm">
			<!-- 搜索框 -->
			<view style="margin-top: 20rpx;display: flex;">
				<view style="width: 150rpx;margin: 0rpx 10px;">
					<button class="login-btn cu-btn block bg-white" @click="showMore">更多</button>
				</view>
				<view style="flex: 1;margin: 0rpx 10px;">
					<uni-easyinput ConfirmType="search" type="text" suffixIcon="search" confirmType="search"
						v-model="queryFrom.student_name" placeholder="老师" @iconClick="init" @confirm="init">

					</uni-easyinput>
				</view>
				<view style="width: 150rpx;margin: 0rpx 10px;">
					<button class="login-btn cu-btn block bg-blue" @click="init">查询</button>
				</view>
			</view>
		</view>

		<view class="font-12 juzhong navbar  " style="color: #999;padding: 10rpx;" v-if="total>0">
			第{{queryFrom.pageNo}}页，共计{{total}}条
		</view>
		<view v-if="list.length==0" class="margin-top-sm">
			<blues-empty img="msg" text="暂无数据">

			</blues-empty>
		</view>
		<view
			:class="{'  padding-sm margin-sm radius bg-white list-item  margin-bottom-sm':true,'background-text-shengxiao':item.startus==1,'background-text-2':item.startus==2,'background-text-shixiao':item.startus==3}"
			v-for="(item,index) in list" @click="onClick(item)" :style="{animationDelay:gets(index)}">
			<view style="z-index:3;position: relative;">
				<view style="display: flex;">
					<view style="flex: 2;">
						<view style="font-weight: bold;">{{item.startClassDate}}</view>
						<view class="font-12 margin-top-xs ">{{ shijianduan(item.sysTimeSlotId) }}</view>
						<view class="font-12 margin-top-xs ">
							{{$getDictNameByValue("offline_class_name", item.offlineClassName)}}
						</view>
					</view>

					<view style="flex: 2;">
						<view class=" font-12" style="z-index: 3;">

							{{$getDictNameByValue("offline_class_type",item.offlineClassType)}}/{{$getDictNameByValue("offline_curriculum_type",item.offlineCurriculumType)}}
						</view>
						<view class="font-12 margin-top-xs" style="">
							{{ formatterUserName(item.principalTeacher) }}/
							{{ sysClassroomId(item.sysClassroomId) }}
						</view>
						<view class="font-12 margin-top-xs " style="">
							{{ item.number +" / "+item.isbeike.split('/')[1]+" / "+item.pkNumber.split('/')[1]}}
						</view>
					</view>
					<view style="flex: 1;">
						<view>
							<button class=" cu-btn block bg-red font-11" style="height: 60rpx;padding: 1px;"
								:class="{'bg-green':item.isbeike.split('/')[1]>=item.isbeike.split('/')[0]}"
								@click="beike(item)">备课{{item.isbeike}}</button>
							<button class=" cu-btn block bg-red font-11 margin-top-xs "
								style="height: 50rpx;padding: 1px;"
								:class="{'bg-green':item.pkNumber.split('/')[1]>=item.pkNumber.split('/')[0]&&item.pkNumber.split('/')[0]!=0}"
								@click="ketangjilu(item)">课堂记录{{item.pkNumber}}</button>
						</view>
					</view>

				</view>


			</view>
		</view>

		<!-- 查询更多 -->
		<customerQuery @refresh="init" ref="customerQuery">
			<template v-slot:default="slotProps">
				<uni-forms-item label="合同状态">
					<uni-data-checkbox style="width: 100%;" mode="button" v-model="queryFrom.startus_EQ"
						:localdata="slotProps.dict.VipContractStartus"
						:map="{text:'dictName',value:'dictValue'}"></uni-data-checkbox>
				</uni-forms-item>
				<uni-forms-item label="合同编号">
					<uni-easyinput v-model="queryFrom.offlineContractId_LIKE" placeholder="合同编号"></uni-easyinput>
				</uni-forms-item>
			</template>

		</customerQuery>

	</view>

</template>

<script>
	import {
		doDelete,
		doDeleteAll,
		doExportExcel,
		fabutongzhi,
		getList
	} from "@/api/system/academicAffairsCenter/offlineTimetable/SysOfflineTimetableManagementApi";
	import {
		isNull,
		formateDate,
		getChineseWeekday,
		dateShifting
	} from '@/utils/validate'
	import {
		formatterUserName,
		formattersysClassroomName,
		getShiJianDuanById,
		getcommon,
	} from "@/utils/common.js";
	import customerQuery from "@/pages/common/customerQuery/customerQuery.vue"
	import {
		showToast
	} from "dingtalk-jsapi/api/apiObj";
	export default {
		components: {
			customerQuery
		},
		data() {
			return {
				queryFrom: {
					pageNo: 1,
					pageSize: 100,
					startus_EQ: null,
					week: formateDate(new Date(), 'yyyy-MM-dd'),
					startClassDate_EQ: formateDate(new Date(), 'yyyy-MM-dd'),
					createTime_ORDER: "DESC",
					principalTeacher_EQ: null,
					customerId_EQ: null,
					number_BEGIN: 1,
				},
				offname: [
					'4',
					'12',
					'3',
					'5',
					'13',
				],
				dict: {},
				total: 0,
				list: []
			}
		},
		mounted() {
			var sdf = getcommon("shijianduan")
			this.dict.offline_class_type = this.$getDictList("offline_class_type");
			this.dict.offline_class_name = this.$getDictList("offline_class_name");
			this.dict.no_yes = this.$getDictList("no_yes");
			this.dict.week = this.$getDictList("week");
			this.dict.offline_class_keshishu = this.$getDictList("offline_class_keshishu");
			this.dict.offline_curriculum_type = this.$getDictList("offline_curriculum_type");
		},
		onLoad(op) {
			if (op.customerId != null) {
				this.queryFrom.customerId_EQ = op.customerId
			}
			this.init()
		},
		// 触底事件 - 上拉加载
		onReachBottom() {
			// 加判断： 页码数 * 每一页获取数据的条数 >= 总条数，如果符合条件说明数据已经全部加载完毕
			if (this.queryFrom.pageNo * this.queryFrom.pageSize >= this.total) {

				return
			} else {

				this.queryFrom.pageNo++ // 每触发一次触底事件，页码加1
				this.listAdd() // 请求接口，获取数据  
			}
		},
		methods: {
			getoffline_curriculum_type(uid) {
				console.log(this.dict.offline_curriculum_type[0].dictName);
				for (var x = 0; x < this.dict.offline_curriculum_type.length; x++) {
					if (this.dict.offline_curriculum_type[x].dictValue == uid) {
						return this.dict.offline_curriculum_type[x].dictName;
					}
				}
			},
			formatterUserName(cellValue) {

				return formatterUserName(
					cellValue

				)
			},

			sysClassroomId(cellValue) {
				return formattersysClassroomName(
					cellValue
				)

			},
			shijianduan(id) {
				return getShiJianDuanById(id)
			},
			dateToWeek(data) {
				return getChineseWeekday(data)
			},
			gets(index) {
				if (index < 10) {
					return index * 0.2 + 's'
				} else {
					return (index % 10 + 1) * 0.2 + 's'
				}

			},
			handleClick(i) {

				if (i == 1) {
					this.queryFrom.startClassDate_EQ = dateShifting(this.queryFrom.startClassDate_EQ, 1);
				}
				if (i == -1) {
					this.queryFrom.startClassDate_EQ = dateShifting(this.queryFrom.startClassDate_EQ, -1);
				}
				if (i == 0) {
					this.queryFrom.startClassDate_EQ
				}


				this.init()
			},
			onClick(item) {
				// uni.navigateTo({
				// 	url: "/pages/vip/contract/plan/plan?id=" + item.id
				// })
			},
			showMore() {
				this.$refs["customerQuery"].open(this.queryFrom);
			},
			init() {
				this.list = []
				this.total = 0
				this.queryFrom.pageNo = 1
				//查询合同信息
				this.fetchData()
			},
			listAdd() {
				//查询合同信息
				this.fetchData()
			},
			async fetchData() {
				const {
					data
				} = await getList(this.queryFrom);
				if (!isNull(data)) {

					this.total = data.total;

					var data3 = data.rows;

					var data2 = []
					for (const data2ElementElement of getcommon("shijianduan")) {
						for (const data2Element of data3) {
							if (data2Element.sysTimeSlotId === data2ElementElement.id) {
								data2.push(data2Element)
							}
						}
					}
					for (let s of data2) {
						this.list.push(s)
					}
				}

			},
			beike(data) {
				if (this.offname.includes(data.offlineClassName)) {
					uni.navigateTo({
						url: "/pages/lpc/kechengguanli/components/beike?id=" + data.id
					})
				} else {
					uni.showToast({
						icon: "none",
						title: "该课程暂不支持操作"
					})
				}


			},
			ketangjilu(data) {
				if (this.offname.includes(data.offlineClassName)) {
					uni.navigateTo({
						url: "/pages/lpc/kechengguanli/components/ketang?id=" + data.id
					})
				} else {
					uni.showToast({
						icon: "none",
						title: "该课程暂不支持操作"
					})
				}

			},

		}
	}
</script>

<style>
	.navbar {

		width: 100%;


		background-color: #f1f1f1;
		z-index: 4;
		text-align: center;

		/* 兼容 */

		position: -webkit-sticky;

		position: -ms-sticky;

		position: -o-sticky;

		/* 粘性定位*/

		position: sticky;

		left: 0;

		top: 0
	}
</style>
<style lang="scss" scoped>
	.floating-div {
		position: fixed;
		bottom: 10px;
		right: 10px;
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		background-color: #f2f2f2;

	}

	/deep/.uni-date__x-input {
		width: auto;
		height: 30rpx;
		padding-left: 5px;
		position: relative;
		flex: 1;
		line-height: 35rpx;
		font-size: 14px;
		overflow: hidden;
	}

	.el-tabs__item {
		list-style: none;
		font-size: 14px;
		font-weight: 500;
		color: #303133;
	}

	/deep/.uni-date-x {
		.icon-calendar {
			display: none;
		}
	}

	/deep/.uni-date-x--border {
		border: none
	}
</style>